<!--
  打印报告
  lzx
  2020年1月13日
-->
<template lang="pug">
  el-container
    el-header.header
      title-bg(moduleTitle="在线论坛")
    el-container
      el-aside.nav-layout(width="258px")
        nav-menu
      el-main
        div.main-content-div.boxSon
          p.main-content-p 打印报告
          el-select(v-model="hospital" placeholder="请选择原切片单位" @change="report" v-if="this.identity[0].identity === '专家' || this.identity[0].identity === '管理专家'")
            el-option(
              v-for="item in hospitalOptions"
              :key="item.id"
              :label="item.hospitalName"
              :value="item.id")
          el-select(v-model="inpuire" placeholder="请选择申请医师" @change="report" v-if="this.identity[0].identity === '专家' || this.identity[0].identity === '管理专家'")
            el-option(
              v-for="item in inpuireOptions"
              :key="item.id"
              :label="item.doctor"
              :value="item.id")
          el-select(v-model="section" placeholder="请选择切片类别" @change="reportDoctor" v-if="this.identity[0].identity === '医生'")
            el-option(
              v-for="item in sectionOptions"
              :key="item.id"
              :label="item.className"
              :value="item.id")
          el-select(v-model="section" placeholder="请选择切片类别" v-else @change="report")
            el-option(
              v-for="item in sectionOptions"
              :key="item.id"
              :label="item.className"
              :value="item.id")
          input(placeholder="请输入患者姓名" v-model="patientName")
          div.btn(@click="report" v-if="identity[0].identity === '专家' || identity[0].identity === '管理专家'") 查询
          div.btn(@click="reportDoctor" v-if="identity[0].identity === '医生'") 查询
          div.btn(@click="reset" v-if="identity[0].identity === '专家' || identity[0].identity === '管理专家'") 重置
          div.btn(@click="resetDoctor" v-if="identity[0].identity === '医生'") 重置
        div.main-content-box
          el-row(:gutter="28")
            el-card.tableBox
              div(slot="header").card-title 报告列表
              div(ref="form")
                el-table(:data="tableData" stripe :height="tableHeight" highlight-current-row)
                  el-table-column(type="index" label="序号")
                  el-table-column(prop="name" label="患者姓名")
                  el-table-column(prop="doctor" label="申请医师")
                  el-table-column(prop="hospitalName" label="原切片单位")
                  el-table-column(prop="className" label="切片类型")
                  el-table-column(prop="diagnosis" label="临床诊断")
                  el-table-column(prop="expert" label="会诊专家")
                  el-table-column(prop="hospitalNameExpert" label="会诊医院")
                  el-table-column(prop="date" label="会诊时间")
                  el-table-column(label="切片采图" width="100")
                    template(slot-scope="scope")
                      el-button(@click="examine(scope.row)" type="text" size="small").check 查看
                  el-table-column(label="录播" width="100")
                    template(slot-scope="scope")
                      el-button(@click="handleClick(scope.row)" v-if="scope.row.videoUrl" type="text" size="small").check 查看
                  el-table-column(label="操作" width="230")
                    template(slot-scope="scope")
                      el-button(@click="reportCards(scope.row)" type="text" size="small" v-if="scope.row.statusOn === false").check 查看
                      el-button(@click="reportCards(scope.row)" type="text" size="small" v-if="scope.row.statusOn === false").check 打印
                      el-button(@click="amendClick(scope.row)" type="text" size="small" v-if="identity[0].identity === '医生' && scope.row.statusOn === true").check 修改预览
                div.paging.pring
                  el-pagination(
                    @current-change="current_change"
                    layout="prev, pager, next"
                    :total="total")
    div(ref="formimg").show.formimg
      el-carousel(:arrow="isArrow" height="800px" indicator-position="none" )
        el-carousel-item(v-for="(item, i) in fileArr" :key="i")
          img(:src="item")
    div(ref="formbgc" @click="cloneImg").show.formbgc
    div(ref="formVideo" v-if="videoShow").formVideo
      Video(:videoSrc="videoSrc" width="800" height="600")
      div(@click="cloneVideo").cloneVideo X
    div(ref="formDiv").show.formDiv
      el-form(:model="formModelDiagnosis" label-width="120px" size="medium")
        el-form-item(label="会诊专家：")
          el-input(v-model="formModelDiagnosis.expert" disabled)
        el-form-item(label="会诊时间：")
          el-input(v-model="formModelDiagnosis.date" disabled)
        el-form-item(label="会诊号：")
          el-input(v-model="formModelDiagnosis.number" disabled)
        el-form-item(label="会诊意见：")
          el-input(v-model="formModelDiagnosis.opinion" disabled type="textarea" resize="none" :rows="10")
        el-form-item(label="光镜所见：")
          template(slot-scope="scope")
            //div.imgDiv
            div.imgHeight
              img(v-for="item in imgUrlArr" :src="item" width="148" height="148")
            div(@click="amend()").amendStyle 确认修改
      div.positionDel(@click="clone") X
</template>

<script>
  import TitleBg from '../../components/TitleBg'
  import NavMenu from '../../components/NavMenu'
  import Message from '../../common/message'
  import Video from '../video/Video'

  export default {
    name: 'print',
    components: {
      TitleBg,
      NavMenu,
      Video
    },
    data() {
      return {
        fullHeight: document.documentElement.clientHeight, // 屏幕可视区域高度
        tableHeight: null, // 表格高度——随屏幕高度实时变化
        options: [],
        isArrow: '',
        inpuireOptions: [], // 申请医生下拉框数据获取
        hospitalOptions: [], // 原切片单位下拉框数据获取
        sectionOptions: [], // 切片类型下拉框数据获取
        hospital: '', // 医院id
        inpuire: '', // 医生model
        section: '', // 切片类型model
        patientName: '', // 患者姓名
        value: '',
        total: 100, // 默认数据总数
        pagesize: 10, // 每页的数据条数
        currentPage: 1, // 默认开始页面
        tableData: [], // 报告表格数据
        identity: null,
        accountDoctor: '',
        paging: '', // 分页总数
        formModelDiagnosis: {}, // 修改预览查看
        fileArr: [], // 光镜所见图片
        fid: '',
        videoSrc: '',
        videoShow: false,
        imgUrlArr: [] // 图片显示的数组
      }
    },
    created() {
      // 身份判断
      this.identity = JSON.parse(this.$KalixCatch.get('personaltwo'))
    },
    mounted() { // 判断身份
      if (this.identity[0].identity === '管理专家') {
        this.report()
        this.getDoctorHospital()
        this.findAllExpert()
        this.sectionType()
      } else if (this.identity[0].identity === '医生') {
        console.log('医生+++++++++++++++++++++++++++++++++++++++')
        this.reportDoctor()
        this.sectionType()
      } else if (this.identity[0].identity === '专家') {
        this.report()
        this.hospitalUnit()
        this.sectionType()
      }
      const that = this
      // 窗口变化重新计算高度
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
          that.$nextTick(() => {
            that.tableHeight = that.fullHeight - 278 - 80 // 患者列表表格高度
            that.$refs.form.style.height = that.fullHeight - 278 - 33 + 'px' // 患者详情表单高度
          })
        })()
      }
      this.$nextTick(() => {
        that.tableHeight = that.fullHeight - 278 - 80 // 患者列表表格高度
        that.$refs.form.style.height = that.fullHeight - 278 - 33 + 'px'// 患者详情表单高度
      })
      this.inpuireDoctor()
    },
    methods: {
      cloneVideo() { // 点击隐藏弹出框
        this.$refs.formbgc.style.display = 'none'
        this.$refs.formVideo.style.display = 'none'
        this.videoShow = false
      },
      cloneImg() { // 隐藏图片
        this.$refs.formbgc.style.display = 'none'
        this.$refs.formimg.style.display = 'none'
      },
      clone() { // 关闭窗口
        this.$refs.formbgc.style.display = 'none'
        this.$refs.formDiv.style.display = 'none'
      },
      examine(res) { // 查看图片
        this.$refs.formbgc.style.display = 'block'
        this.$refs.formimg.style.display = 'block'
        console.log('res6+++++++++', res)
        this.fileArr = res.picture.split(',')
        this.fileArr.length > 1 ? this.isArrow = 'always' : this.isArrow = 'never'
      },
      amendClick(row) { // 修改预览
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/reports/getReportFid',
          params: {
            fid: row.fid
          }
        }).then((res) => {
          this.$refs.formbgc.style.display = 'block'
          this.$refs.formDiv.style.display = 'block'
          this.fid = row.id
          res.data.data.forEach((item) => {
            this.formModelDiagnosis = item
          })
          this.imgUrlArr = this.formModelDiagnosis.picture.split(',')
          console.log('this.imgUrlArr', this.imgUrlArr)
        })
      },
      saveData(row) { // 提交档案
        this.axios.request({
          method: 'PUT',
          url: '/camel/rest/telemedicine/reports/' + row.id + '/updateReport',
          params: {
            id: row.id,
            fid: row.fid,
            number: row.number,
            picture: row.picture,
            opinion: row.opinion,
            statusOn: false
          }
        }).then((res) => {
          if (res.data.success === true) {
            Message.success('修改成功')
            this.reportDoctor()
          } else {
            Message.error(res.data.msg)
          }
        })
      },
      amend() { // 修改预览确认修改
        this.axios.request({
          method: 'DELETE',
          url: '/camel/rest/telemedicine/reports/' + this.fid
        }).then((res) => {
          this.axios.request({ // 原切片类型获取
            method: 'GET',
            url: '/camel/rest/telemedicine/reports/updateReport',
            params: {
              fid: this.formModelDiagnosis.fid
            }
          }).then((res) => {
            if (res.data.msg === '保存成功！') {
              Message.success('修改成功!')
              this.$refs.formbgc.style.display = 'none'
              this.$refs.formDiv.style.display = 'none'
              this.reportDoctor()
            } else {
              Message.error(res.msg)
            }
          })
        })
      },
      getDoctorHospital() {
        this.axios.request({ // 管理专家查原切片类型获取
          method: 'GET',
          url: 'camel/rest/telemedicine/doctorCensus/getDoctorHospital'
        }).then((res) => {
          console.log('getDoctorHospital.res+6+++++++', res)
          res.data.data.forEach((res) => {
            this.hospitalOptions.push({hospitalName: res.hospitalName, id: res.hospitalId})
          })
        })
      },
      findAllExpert() {
        this.axios.request({ // 管理专家查申请医师
          method: 'GET',
          url: 'camel/rest/telemedicine/doctorCensus/findAllDoctor'
        }).then((res) => {
          res.data.data.forEach((res) => {
            this.inpuireOptions.push({doctor: res.name, id: res.id})
          })
        })
      },
      sectionType() {
        this.axios.request({ // 原切片类型获取
          method: 'GET',
          url: 'camel/rest/telemedicine/classs'
        }).then((res) => {
          this.sectionOptions = res.data.data
        })
      },
      hospitalUnit() {
        this.axios.request({ // 原切片单位下拉框数据获取
          method: 'GET',
          url: '/camel/rest/telemedicine/reports/selectHospital',
          params: {
            expertId: this.identity[0].id
          }
        }).then((res) => {
          this.hospitalOptions = res.data.data
        })
      },
      inpuireDoctor() { // 申请医生下拉框数据获取
        this.axios.request({
          method: 'GET',
          url: 'camel/rest/telemedicine/reports/selectDoctor',
          params: {
            expertId: this.identity[0].id
          }
        }).then((res) => {
          this.inpuireOptions = res.data.data
        })
      },
      resetDoctor() { // 医生重置
        this.inpuire = ''
        this.hospital = ''
        this.patientName = ''
        this.section = ''
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/reports/getReportDoctor',
          params: {
            doctorId: 0, // 申请医生
            unit: 0, // 医院id
            patient: this.patientName, // 患者姓名
            type: 0, // 切片类型
            id: this.identity[0].id,
            num: 1
          }
        }).then((res) => {
          res.data.data.forEach((data) => {
            data.date = data.date.substring(0, 10)
          })
          this.tableData = res.data.data
          this.total = this.paging = res.data.totalCount * 10
          this.$refs.formbgc.style.display = 'none'
          this.$refs.formDiv.style.display = 'none'
        })
      },
      reset() { // 专家重置
        this.inpuire = ''
        this.hospital = ''
        this.patientName = ''
        this.section = ''
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/reports/getReport',
          params: {
            doctorId: 0, // 申请医生
            unit: 0, // 医院id
            patient: this.patientName, // 患者姓名
            type: 0, // 切片类型
            id: this.identity[0].id,
            identity: this.identity[0].identity,
            num: 1
          }
        }).then((res) => {
          res.data.data.forEach((data) => {
            data.date = data.date.substring(0, 10)
          })
          this.tableData = res.data.data
          this.total = this.paging = res.data.totalCount * 10
          this.$refs.formbgc.style.display = 'none'
          this.$refs.formDiv.style.display = 'none'
        })
      },
      reportDoctor() { // 医生表格数据获取
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/reports/getReportDoctor',
          params: {
            doctorId: this.inpuire === '' ? 0 : this.inpuire, // 申请医生
            unit: this.hospital === '' ? 0 : this.hospital, // 医院id
            patient: this.patientName, // 患者姓名
            type: this.section === '' ? 0 : this.section, // 切片类型
            id: this.identity[0].id,
            num: this.currentPage
          }
        }).then((res) => {
          console.log('res医生++++++++++++++++++++++', res)
          res.data.data.forEach((data) => {
            data.date = data.date.substring(0, 10)
          })
          this.tableData = res.data.data
          this.total = this.paging = res.data.totalCount * 10
        })
      },
      report() { // 专家表格数据获取
        this.axios.request({
          method: 'GET',
          url: 'camel/rest/telemedicine/reports/getReport',
          params: {
            doctorId: this.inpuire === '' ? 0 : this.inpuire, // 申请医生
            unit: this.hospital === '' ? 0 : this.hospital, // 医院id
            patient: this.patientName, // 患者姓名
            type: this.section === '' ? 0 : this.section, // 切片类型
            id: this.identity[0].id,
            identity: this.identity[0].identity,
            num: this.currentPage
          }
        }).then((res) => {
          res.data.data.forEach((data) => {
            data.date = data.date.substring(0, 10)
          })
          this.tableData = res.data.data
          this.total = this.paging = res.data.totalCount * 10
          this.$refs.formbgc.style.display = 'none'
          this.$refs.formDiv.style.display = 'none'
        })
      },
      handleClick(row) { // 点击播放视频
        if (row.videoUrl) {
          // this.$refs.formVideo.style.display = 'block'
          this.$refs.formbgc.style.display = 'block'
          this.videoShow = true
          console.log('this.videoShow', this.videoShow)
          this.videoSrc = row.videoUrl
          // this.videoSrc = 'http://192.168.31.112:8585/1.OSGI概要介绍及课程计划.mp4'
          console.log(row.videoUrl)
          console.log(typeof row.videoUrl)
        } else {
          Message.warning('视频不存在')
        }
      },
      current_change: function (currentPage) { // 分页跳转
        this.currentPage = currentPage
        if (this.identity[0].identity === '管理专家') {
          this.report()
        } else if (this.identity[0].identity === '医生') {
          this.reportDoctor()
        } else if (this.identity[0].identity === '专家') {
          this.report()
        }
      },
      // 点击操作里的查看、打印和修改预览，跳转页面
      reportCards(item) {
        // this.$router.push({name: 'reportCards', params: {forumId: JSON.stringify(item)}})
        // window.sessionStorage.setItem('item', JSON.stringify(item))
        let newPage = this.$router.resolve({
          path: '/print/reportCards',
          name: 'reportCards',
          query: {reportData: JSON.stringify(item)}
          //   params: {forumId: JSON.stringify(item)}
        })
        window.open(newPage.href, '_blank')
        this.getBase64Pdf(item)
      },
      // 页面导出PDF功能
      getBase64Pdf(item) {
        console.log('item+++++++++++++', item)
        // let _this = this
        // let pdfDom = _this.$refs.pdfDom
        // _this.getPdf(pdfDom)
        this.axios.request({
          method: 'PUT',
          url: '/camel/rest/telemedicine/files/' + item.fid + '/updateStatus',
          params: {
            // id: item.id
            id: item.fid
          }
        })
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/reports/updateStatus',
          params: {
            id: item.id
          }
        })
      }
    }
  }
</script>

<style scoped lang="stylus">
  .printReport
    width 100%
    height 100%

  .boxFar
    width 100%
    height 100%

  .boxCenLeft
    width 13.4%
    height 94%
    position relative
    float left
    margin-right 28px

  .boxSon
    p
      color #fff
      font-size 20px
      margin-top 20px
      margin-bottom 20px

    input
      width 217px
      height 42px
      background-color rgba(0, 0, 0, 0.15)
      color #fff
      padding-left 18px
      padding-right 18px
      box-sizing border-box
    input:

    :-webkit-input-placeholder
      color #C0C4CC

    .btn
      display inline-block
      width 66px
      height 42px
      line-height 42px
      text-align center
      background-color #0F5ABC
      border 1px solid #fff
      vertical-align top
      margin-left 20px
      color #fff
      cursor pointer
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
      border-radius 5px
      box-sizing border-box

  .boxCenter
    margin-top 12px
    width 84%
    height 90%
    float left
    vertical-align top
    position relative

  .tableBox
    margin-top 20px
    border-radius 5px
    background-color #fff
    width 100%
    height 70%
    position relative

  .printText
    width 100%
    height 66px
    line-height 66px
    border-bottom 1px solid #EFF0F0
    padding-left 20px
    letter-spacing 2px
    margin-bottom 24px

  .paging
    text-align center

  .show
    display none

  .formbgc
    width 100%
    height 100%
    background rgba(0, 0, 0, 0.5)
    position absolute
    display none
    z-index 10

  .formDiv
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    z-index 20
    width 600px
    height 650px
    background-color #fff
    padding 40px 40px 0 0
    border-radius 5px

  .positionDel
    position absolute
    right 10px
    top 10px

  .amendStyle
    width 100px
    height 40px
    line-height 40px
    text-align center
    margin 20px 0 0 150px
    color #fff
    background-color #1572E8
    border-radius 24px

  .formimg /*width 1100px
    height 500px*/
    width 800px
    display none
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    z-index 20
    grid-row-gap 20px
    grid-column-gap 20px

    img
      margin 10px
      width 100%

  .imgDiv
    border 1px solid #000

  .formVideo
    /*display none*/
    position absolute
    left 50%
    top 50%
    padding 40px
    background-color #fff
    transform translate(-50%, -50%)
    z-index 10

  .cloneVideo
    width 10px
    height 10px
    line-height: 10px
    text-align center
    border-radius 50%
    border 1px solid #000
    position absolute
    right 10px
    top 10px

  .imgHeight
    height 150px
    overflow-x auto
</style>
<style lang="stylus">
  .boxSon .el-input .el-input__inner
    background-color rgba(0, 0, 0, 0.1)
    border none
    width 217px
    height 42px
    border-radios 0
    vertical-align middle
    color #fff

  .boxSon .el-select
    background-color rgba(0, 0, 0, 0.1)
    margin-right 20px

  .tableBox .check
    display inline-block
    width 60px
    height 34px
    color #6BBBF9
    border 1px solid #6BBBF9
    text-align center

  .tableBox .el-table
    margin 0 20px

  .pring .el-pagination
    padding 16px 5px !important

</style>
